import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * CircleTransition 组件
 * 支持由内向外（扩散）和由外向内（收缩）两种动画方向
 *
 * @param {boolean} show - 是否显示动画层
 * @param {{x: number, y: number}} center - 动画圆心坐标
 * @param {number} maxRadius - 动画圆的最大半径
 * @param {React.ReactNode} children - 动画层内要显示的内容
 * @param {function} onAnimationComplete - 动画完成后的回调
 * @param {'out'|'in'} direction - 动画方向，'out'为扩散，'in'为收缩
 */
const CircleTransition = ({
  show,
  center,
  maxRadius,
  children,
  onAnimationComplete,
  direction = 'out', // 新增：动画方向
}) => {
  // 根据方向设置初始和目标clip-path
  // 扩散：初始半径0，目标半径maxRadius
  // 收缩：初始半径maxRadius，目标半径0
  const initialClip = direction === 'out'
    ? `circle(0px at ${center.x}px ${center.y}px)`
    : `circle(${maxRadius}px at ${center.x}px ${center.y}px)`;
  const animateClip = direction === 'out'
    ? `circle(${maxRadius}px at ${center.x}px ${center.y}px)`
    : `circle(0px at ${center.x}px ${center.y}px)`;

  return (
    // AnimatePresence用于控制动画层的进出场动画
    <AnimatePresence>
      {show && (
        // motion.div用于实现clip-path的动画
        <motion.div
          style={{
            position: 'fixed', // 固定定位，覆盖全屏
            top: 0,
            left: 0,
            width: '100vw',
            height: '100vh',
            zIndex: 1000, // 保证在最上层
            pointerEvents: 'auto', // 可交互
            background: '#fff', // 动画层背景色
            clipPath: animateClip, // 让静态样式和动画目标一致，防止闪烁
            overflow: 'hidden', // 防止内容溢出
          }}
          // 初始clip-path
          initial={{ clipPath: initialClip }}
          // 动画到目标clip-path
          animate={{ clipPath: animateClip }}
          // 退出时clip-path回到初始
          exit={{ clipPath: initialClip }}
          // 动画时长和缓动曲线
          transition={{ duration: 0.7, ease: 'easeInOut' }}
          // 动画完成时回调，通知父组件切换页面
          onAnimationComplete={onAnimationComplete}
        >
          {/* 动画层内容（目标页面） */}
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default CircleTransition;
